import React, { useRef } from 'react';
import { UltraMaleCharacter3D } from '../UltraMaleCharacter3D';
import { UltraFemaleCharacter3D } from '../UltraFemaleCharacter3D';
import { UltraParkEnvironment } from '../UltraParkEnvironment';
import type { DatingProfile } from '../../types';
import * as THREE from 'three';

interface ParkSceneProps {
  profiles: DatingProfile[];
  onProfileClick: (profile: DatingProfile) => void;
}

export const ParkScene: React.FC<ParkSceneProps> = ({ profiles, onProfileClick }) => {
  const sceneRef = useRef<THREE.Group>(null);
  const GROUND_LEVEL = 0;

  // Use 8 profiles for park scene
  const parkProfiles = profiles.slice(0, 8);

  return (
    <group ref={sceneRef}>
      {/* 商业级公园环境 */}
      <UltraParkEnvironment radius={20} />

      {/* 角色定位在公园各个休闲区域 */}
      {parkProfiles.map((profile, index) => {
        // 精确定义公园座位位置和朝向
        const seatData = [
          // 凉亭内部石凳
          { pos: [-8.8, 0.25, 10], rot: [0, Math.PI/4, 0], seated: true },
          { pos: [-11.2, 0.25, 10], rot: [0, -Math.PI/4, 0], seated: true },
          { pos: [-10, 0.25, 8.8], rot: [0, Math.PI/2, 0], seated: true },
          { pos: [-10, 0.25, 11.2], rot: [0, -Math.PI/2, 0], seated: true },
          
          // 公园长椅
          { pos: [5.5, 0.25, -6], rot: [0, Math.PI/4 + Math.PI/2, 0], seated: true },
          { pos: [-5.5, 0.25, 6], rot: [0, -Math.PI/4 + Math.PI/2, 0], seated: true },
          { pos: [9.5, 0.25, 2], rot: [0, Math.PI/2 + Math.PI/2, 0], seated: true },
          { pos: [-1.5, 0.25, -10], rot: [0, Math.PI/2, 0], seated: true }
        ];
        
        const seatInfo = seatData[index] || { pos: [0, 0, 0], rot: [0, 0, 0], seated: false };
        const [x, y, z] = seatInfo.pos;
        
        // 根据角色性别选择超精细模型
        const CharacterComponent = profile.gender === 'male' ? UltraMaleCharacter3D : UltraFemaleCharacter3D;
        
        return (
          <CharacterComponent
            key={profile.id}
            profile={profile}
            position={[x, y, z]}
            rotation={seatInfo.rot}
            onClick={() => onProfileClick(profile)}
            scale={1.0}
            isSeated={seatInfo.seated}
          />
        );
      })}
    </group>
  );
};